<template>
  <div class="container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item, index) in newlist" :name="index">
        <template #title>
          <div class="header-top">
            <h4>标题：{{ item.arttitle }}</h4>
            <span class="headertime">发布时间：{{ item.uptime }}</span>
          </div>
        </template>
        <div v-html="item.contents"></div>
        <div>
          <span>发布者：{{ item.nick }}</span>
          <p><el-button type="primary" size="small" @click="xinwendelete(item._id)">删除新闻</el-button></p>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup >
import { blogAdd, blogList, blogDelete } from '../../../api/new.js'
import { ref, onMounted, onBeforeMount } from 'vue'
const newlist = ref([''])

const id = ref('')
const arttitle = ref('')
const articleclass = ref("")
const classnumber = ref('')
const contents = ref('')
const uptime = ref("")


//删除
const xinwendelete = async (_id) => {
  //确认删除？
  ElMessageBox.confirm('确认删除这条新闻吗?', '提示信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const data = await blogDelete(_id)
      let { resultCode, resultInfo } = data
      if (resultCode == 1) {
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
        coo()
      }
    })
}
//获取列表
const coo = async () => {
  let classnumber = '4'
  let data = await blogList(classnumber)
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    console.log(resultInfo);
    newlist.value = resultInfo  //列表
  }
}
onMounted(() => {

  coo()

})
</script>
<style scoped lang="scss">
.container {
  padding: 20px;

  .header-top {
    height: 50px;
    width: 100%;
    min-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 18px;
h4{
  margin: 0;
}
    .headertime {
      width: 250px;
      font-size: 14px;
    }
  }
}
</style>